<template>
  <div class="dashboard-container">
    <div class="tableBar">
      <el-table border style="width: 100%" :data="tableData" height="600">
        <el-table-column fixed prop="timeSlot" label="Period/时间段" width="150"></el-table-column>
        <el-table-column prop="partNo1" label="Part No./料号/产出1" width="300">
          <!--            <el-select v-model="ruleForm.PartNo1InTable" placeholder="料号1" clearable></el-select>-->
        </el-table-column>
        <el-table-column prop="partNo2" label="Part No./料号/产出2" width="300">
          <!--            <el-select placeholder="料号2"></el-select>-->
        </el-table-column>
        <el-table-column prop="downTime" label="Duration/停机时长" width="300">
          <el-input placeholder="总时长" style="width: 100px"></el-input> /min
        </el-table-column>
        <el-table-column prop="reason1" label="Reason1/原因1" width="300">
          <el-cascader
            v-model="reason1"
            :options="reasons"
            :props="{ expandTrigger: 'hover' }"
            placeholder="原因1"
            style="width: 150px"
            clearable></el-cascader>
          <el-input placeholder="时长1" style="width: 70px"></el-input> /min
        </el-table-column>
        <el-table-column prop="reason2" label="Reason2/原因2" width="300">
          <el-cascader
            v-model="reason2"
            :options="reasons"
            :props="{ expandTrigger: 'hover' }"
            placeholder="原因2"
            style="width: 150px"
            clearable></el-cascader>
          <el-input placeholder="时长2" style="width: 70px"></el-input> /min
        </el-table-column>
        <el-table-column prop="reason3" label="Reason3/原因3" width="300">
          <el-cascader
            v-model="reason3"
            :options="reasons"
            :props="{ expandTrigger: 'hover' }"
            placeholder="原因3"
            style="width: 150px"
            clearable></el-cascader>
          <el-input placeholder="时长3" style="width: 70px"></el-input> /min
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({})
export default class shiftTable extends Vue {

}
</script>

<style scoped lang="scss">

</style>
